<template>
  <div id="xplayer">
    <div class="player-container">
      <!-- 视频区域 -->
      <div class="player-video-area" @click="doPlayVideo">
        <!-- 视频播放器 -->
        <div class="player-video-perch">
          <div class="player-video-wrap">
            <video
              id="EXPlayer"
              ref="XPlayerRef"
              @timeupdate="updateProgress"
              @error="handleLoadError"
              @loadedmetadata="onLoadedMetadata"
              style="width: 100%; height: 100%; object-fit: cover"
            >
              <source preload="auto" :src="videoUrl" />
            </video>
          </div>
          <div v-if="videoLoadError" class="videoLoadError">视频加载失败</div>
        </div>
        <!-- 弹幕层 -->
        <div class="player-adv-dm-wrap" ref="advBarrageRef">
          <!-- 高级弹幕 -->
        </div>
        <div class="player-bas-dm-wrap" ref="baseBarrageRef">
          <!-- 基础弹幕 -->
        </div>
        <div class="player-cmd-dm-wrap" ref="cmdBarrageRef">
          <!-- 中间弹幕 -->
        </div>
        <!-- 播放窗口中的播放按钮 暂停时显示 -->
        <div class="player-state-wrap">
          <div
            class="player-state-play-icon"
            :class="!isXPlayerStart ? '' : 'hidden'"
          >
            <svg
              viewBox="0 0 80 80"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <defs>
                <polygon
                  id="cd9e036b-17ed-4fb1-988d-92dd0e62df02"
                  points="0 0 80 0 80 80 0 80"
                ></polygon>
                <path
                  id="e9029cf2-058b-4dc3-a369-191aaec4988d"
                  d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,13.2595235 C48.2367415,12.266226 48.9249622,11.289246 49.6299296,10.3244467 L49.6299296,10.3244467 L50.1626124,9.60371998 L50.4314773,9.24519521 C50.5211754,9.12568695 50.6099559,9.00548922 50.7122714,8.89540373 C50.9162141,8.67408363 51.1596148,8.48195113 51.4537145,8.32682022 C51.7507964,8.1735279 52.0912362,8.05195123 52.5463795,8.01403034 Z M30.1292787,34.6305448 C29.9027436,35.0737419 29.7609153,35.5553261 29.7110787,36.0505615 C29.4138374,39.0042999 29.2652168,42.0471726 29.2652168,45.1791797 C29.2652168,48.0068864 29.3863609,50.8345931 29.6286492,53.6622998 L29.7399083,54.8741737 C29.9552063,57.072794 31.9120739,58.6805944 34.1106942,58.4652963 C34.6308013,58.4143652 35.1358879,58.2620098 35.597405,58.0168417 C38.4166275,56.5192079 41.1473744,54.9840008 43.7896457,53.4112203 C45.7989419,52.2152106 47.7645435,50.9930278 49.6864507,49.7446716 L51.1196851,48.8034922 C52.9601471,47.5816163 53.4616102,45.0991009 52.2397342,43.2586389 C51.9555036,42.830514 51.5914399,42.4611683 51.1674532,42.1708009 C48.8122631,40.5578484 46.3529939,38.9884709 43.7896457,37.4626684 C41.5302725,36.1178034 39.2374735,34.835025 36.9112487,33.6143333 L35.5115044,32.8893654 C33.5444304,31.8839182 31.1347259,32.6634708 30.1292787,34.6305448 Z"
                ></path>
                <filter
                  x="-15.4%"
                  y="-16.3%"
                  width="130.9%"
                  height="132.5%"
                  filterUnits="objectBoundingBox"
                  id="0bb3e1ae-f6c9-4254-a22a-e753c086e5a8"
                >
                  <feOffset
                    dx="0"
                    dy="2"
                    in="SourceAlpha"
                    result="shadowOffsetOuter1"
                  ></feOffset>
                  <feGaussianBlur
                    stdDeviation="1"
                    in="shadowOffsetOuter1"
                    result="shadowBlurOuter1"
                  ></feGaussianBlur>
                  <feColorMatrix
                    values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"
                    type="matrix"
                    in="shadowBlurOuter1"
                    result="shadowMatrixOuter1"
                  ></feColorMatrix>
                  <feOffset
                    dx="0"
                    dy="0"
                    in="SourceAlpha"
                    result="shadowOffsetOuter2"
                  ></feOffset>
                  <feGaussianBlur
                    stdDeviation="3.5"
                    in="shadowOffsetOuter2"
                    result="shadowBlurOuter2"
                  ></feGaussianBlur>
                  <feColorMatrix
                    values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"
                    type="matrix"
                    in="shadowBlurOuter2"
                    result="shadowMatrixOuter2"
                  ></feColorMatrix>
                  <feMerge>
                    <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                    <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
                  </feMerge>
                </filter>
              </defs>
              <g
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
                opacity="0.8"
              >
                <mask id="ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a" fill="white">
                  <use xlink:href="#cd9e036b-17ed-4fb1-988d-92dd0e62df02"></use>
                </mask>
                <g mask="url(#ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a)">
                  <use
                    fill="black"
                    fill-opacity="1"
                    filter="url(#0bb3e1ae-f6c9-4254-a22a-e753c086e5a8)"
                    xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"
                  ></use>
                  <use
                    fill="#FFFFFF"
                    fill-rule="evenodd"
                    xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"
                  ></use>
                </g>
              </g>
            </svg>
          </div>
        </div>
        <!-- 播放器控制栏 -->
        <div class="player-control-wrap" @click.stop>
          <div class="player-control-top">
            <!-- 进度条 -->
            <div class="player-video-progress">
              <!-- 总进度 -->
              <div
                id="progresswrap"
                class="player-video-progress-slider bui bui-slider"
                aria-label="进度条"
                @click="setProgress"
              >
                <div class="bui-track bui-track-video-progress">
                  <div class="bui-bar-wrap">
                    <!-- 已播放的时间轴 -->
                    <div
                      id="progressbar"
                      class="bui-bar bui-bar-normal"
                      :style="{ width: progress + '%' }"
                      role="progressbar"
                      ref="progressbarRef"
                    >
                      <div class="progressbar__area"></div>
                      <!-- 进度小图标 -->
                      <div
                        id="bui-thumb-dot"
                        class="bui-thumb"
                        :style="{
                          transform: 'translateX(' + progressDot + 'px)',
                        }"
                      >
                        <div
                          class="bui-thumb-dot-special"
                          style="width: 20px; height: 20px"
                        >
                          <div>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 18 18"
                              width="18"
                              height="18"
                              preserveAspectRatio="xMidYMid meet"
                              style="
                                width: 100%;
                                height: 100%;
                                transform: translate3d(0px, 0px, 0px);
                              "
                            >
                              <defs>
                                <clipPath id="__lottie_element_19">
                                  <rect
                                    width="18"
                                    height="18"
                                    x="0"
                                    y="0"
                                  ></rect>
                                </clipPath>
                              </defs>
                              <g clip-path="url(#__lottie_element_19)">
                                <g
                                  transform="matrix(0.9883429408073425,-0.7275781631469727,0.6775955557823181,0.920446515083313,7.3224687576293945,-0.7606706619262695)"
                                  opacity="1"
                                  style="display: block"
                                >
                                  <g
                                    opacity="1"
                                    transform="matrix(0.9937776327133179,-0.11138220876455307,0.11138220876455307,0.9937776327133179,-2.5239999294281006,1.3849999904632568)"
                                  >
                                    <path
                                      fill="rgb(51,51,51)"
                                      fill-opacity="1"
                                      d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z"
                                    ></path>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(1.1436611413955688,0.7535901665687561,-0.6317168474197388,0.9587040543556213,16.0070743560791,2.902894973754883)"
                                  opacity="1"
                                  style="display: block"
                                >
                                  <g
                                    opacity="1"
                                    transform="matrix(0.992861807346344,0.1192704513669014,-0.1192704513669014,0.992861807346344,-2.5239999294281006,1.3849999904632568)"
                                  >
                                    <path
                                      fill="rgb(51,51,51)"
                                      fill-opacity="1"
                                      d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z"
                                    ></path>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(1,0,0,1,8.890999794006348,8.406000137329102)"
                                  opacity="1"
                                  style="display: block"
                                >
                                  <g
                                    opacity="1"
                                    transform="matrix(1,0,0,1,0.09099999815225601,1.1009999513626099)"
                                  >
                                    <path
                                      fill="rgb(255,255,255)"
                                      fill-opacity="1"
                                      d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z"
                                    ></path>
                                    <path
                                      stroke-linecap="butt"
                                      stroke-linejoin="miter"
                                      fill-opacity="0"
                                      stroke-miterlimit="4"
                                      stroke="rgb(51,51,51)"
                                      stroke-opacity="1"
                                      stroke-width="1.5"
                                      d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z"
                                    ></path>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(1,0,0,1,8.89900016784668,8.083999633789062)"
                                  opacity="1"
                                  style="display: block"
                                >
                                  <g
                                    opacity="1"
                                    transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)"
                                  >
                                    <path
                                      fill="rgb(51,51,51)"
                                      fill-opacity="1"
                                      d=" M0.875,-1.125 C0.875,-1.125 0.875,1.125 0.875,1.125 C0.875,1.607912540435791 0.48291251063346863,2 0,2 C0,2 0,2 0,2 C-0.48291251063346863,2 -0.875,1.607912540435791 -0.875,1.125 C-0.875,1.125 -0.875,-1.125 -0.875,-1.125 C-0.875,-1.607912540435791 -0.48291251063346863,-2 0,-2 C0,-2 0,-2 0,-2 C0.48291251063346863,-2 0.875,-1.607912540435791 0.875,-1.125z"
                                    ></path>
                                  </g>
                                </g>
                                <g
                                  transform="matrix(1,0,0,1,14.008999824523926,8.083999633789062)"
                                  opacity="1"
                                  style="display: block"
                                >
                                  <g
                                    opacity="1"
                                    transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)"
                                  >
                                    <path
                                      fill="rgb(51,51,51)"
                                      fill-opacity="1"
                                      d=" M0.8999999761581421,-1.100000023841858 C0.8999999761581421,-1.100000023841858 0.8999999761581421,1.100000023841858 0.8999999761581421,1.100000023841858 C0.8999999761581421,1.596709966659546 0.4967099726200104,2 0,2 C0,2 0,2 0,2 C-0.4967099726200104,2 -0.8999999761581421,1.596709966659546 -0.8999999761581421,1.100000023841858 C-0.8999999761581421,1.100000023841858 -0.8999999761581421,-1.100000023841858 -0.8999999761581421,-1.100000023841858 C-0.8999999761581421,-1.596709966659546 -0.4967099726200104,-2 0,-2 C0,-2 0,-2 0,-2 C0.4967099726200104,-2 0.8999999761581421,-1.596709966659546 0.8999999761581421,-1.100000023841858z"
                                    ></path>
                                  </g>
                                </g>
                              </g>
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="player-control-bottom">
            <!-- 视频区域工具栏 -->
            <div class="player-video-control-bottom-left">
              <div class="player-video-btn player-video-btn-start">
                <!-- 播放暂停按钮 -->
                <button
                  id="btn-play"
                  @click="doPlayVideo"
                  class="player-iconfont"
                  aria-label="播放"
                >
                  <span class="bp-svgicon"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 28 28"
                      width="28"
                      height="28"
                      preserveAspectRatio="xMidYMid meet"
                      style="
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0px, 0px, 0px);
                      "
                    >
                      <defs>
                        <clipPath id="__lottie_element_316">
                          <rect width="28" height="28" x="0" y="0"></rect>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#__lottie_element_316)">
                        <!-- 注意:这里播放器图标的暂停图标时隐藏的，根据需要进行切换 -->
                        <!-- 暂停按钮图标 -->
                        <g
                          opacity="1"
                          class="pause-icon"
                          v-show="isXPlayerStart"
                        >
                          <g
                            transform="matrix(1,0,0,1,14,14)"
                            opacity="1"
                            style="display: block"
                          >
                            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                              <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"
                              ></path>
                              <path
                                stroke-linecap="butt"
                                stroke-linejoin="miter"
                                fill-opacity="0"
                                stroke-miterlimit="4"
                                stroke="rgb(255,255,255)"
                                stroke-opacity="1"
                                stroke-width="0"
                                d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"
                              ></path>
                            </g>
                          </g>
                          <g
                            style="display: block"
                            transform="matrix(1,0,0,1,24.812000274658203,14)"
                            opacity="1"
                          >
                            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                              <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"
                              ></path>
                              <path
                                stroke-linecap="butt"
                                stroke-linejoin="miter"
                                fill-opacity="0"
                                stroke-miterlimit="4"
                                stroke="rgb(255,255,255)"
                                stroke-opacity="1"
                                stroke-width="0"
                                d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"
                              ></path>
                            </g>
                          </g>
                        </g>
                        <!-- 三角播放按钮图标 -->
                        <g
                          transform="matrix(1,0,0,1,14,14)"
                          class="play-icon"
                          opacity="1"
                          v-show="!isXPlayerStart"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d="M0 0"
                            ></path>
                            <path
                              stroke-linecap="butt"
                              stroke-linejoin="miter"
                              fill-opacity="0"
                              stroke-miterlimit="4"
                              stroke="rgb(255,255,255)"
                              stroke-opacity="1"
                              stroke-width="0"
                              d="M0 0"
                            ></path>
                          </g>
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"
                            ></path>
                            <path
                              stroke-linecap="butt"
                              stroke-linejoin="miter"
                              fill-opacity="0"
                              stroke-miterlimit="4"
                              stroke="rgb(255,255,255)"
                              stroke-opacity="1"
                              stroke-width="0"
                              d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"
                            ></path>
                          </g>
                        </g>
                      </g></svg
                  ></span>
                </button>
              </div>
              <!-- 播放时间 -->
              <div class="player-video-time" name="time_textarea">
                <div class="player-video-time-wrap" name="time_textarea">
                  <span class="player-video-time-now" name="time_textarea">{{
                    formattedCurrentTime
                  }}</span>
                  <span class="player-video-divider" name="time_textarea"
                    >/</span
                  >
                  <span class="player-video-time-total" name="time_textarea">{{
                    formattedDuration
                  }}</span>
                </div>
              </div>
            </div>
            <div class="player-video-control-bottom-right">
              <!-- 清晰度 -->
              <div
                class="player-video-btn player-video-btn-quality"
                @mouseover="showQualityWrap = true"
                @mouseleave="showQualityWrap = false"
              >
                <div
                  class="player-video-quality-menu bui-select bui-select-quality-menu"
                >
                  <div class="bui-select-wrap">
                    <div class="bui-select-border">
                      <!-- 清晰度选项 -->
                      <div class="bui-select-header">
                        <span
                          class="bui-select-result"
                          v-if="selectedQuality == '480P'"
                          >自动</span
                        >
                        <span class="bui-select-result" v-else>{{
                          selectedQuality
                        }}</span>
                      </div>
                      <!-- 弹出清晰度列表 -->
                      <div
                        class="bui-select-list-wrap"
                        v-show="showQualityWrap"
                      >
                        <ul class="bui-select-list">
                          <li
                            class="bui-select-item"
                            :class="
                              selectedQuality == item.name ? 'active' : ''
                            "
                            v-for="(item, index) in QualityList"
                            :key="index"
                            @click="setVideoQuality(item.quality)"
                          >
                            <span class="player-video-quality-text">{{
                              item.name
                            }}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 倍速 -->
              <div
                class="player-video-btn player-video-btn-speed"
                @mousemove="showPlaybackRateWrap = true"
                @mouseleave="showPlaybackRateWrap = false"
              >
                <button class="player-video-btn-speed-name" aria-label="倍速">
                  <span v-if="selectedPlaybackRate == '1x'">倍速</span>
                  <span v-else>{{ selectedPlaybackRate }}</span>
                </button>
                <!-- 倍速选择列表 -->
                <div
                  class="player-video-btn-speed-menu-wrap"
                  v-show="showPlaybackRateWrap"
                >
                  <ul class="player-video-btn-speed-menu">
                    <li
                      class="player-video-btn-speed-menu-list"
                      :class="selectedPlaybackRate == item.name ? 'active' : ''"
                      @click="setPlaybackRate(item)"
                      v-for="(item, index) in PlaybackRateList"
                      :key="index"
                      :data-value="item.playbackRate"
                    >
                      {{ item.name }}
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 字幕 -->
              <div class="player-video-btn-subtitle">
                <button
                  class="player-iconfont player-iconfont-subtitle"
                  aria-label="字幕"
                  @click="setSubtitle"
                >
                  <span v-if="!showSubtitle" class="bp-svgicon">
                    <img
                      src="@/assets/icon/zimu.svg"
                      width="30"
                      alt=""
                      srcset=""
                    />
                  </span>
                  <span v-else class="bp-svgicon">
                    <img
                      src="@/assets/icon/zimu_close.svg"
                      width="30"
                      alt=""
                      srcset=""
                    />
                  </span>
                </button>
              </div>
              <!-- 音量 -->
              <div
                class="player-video-btn-volume"
                @mouseover="showVolumeBarVisiable"
                @mouseleave="showVolumeBar = false"
              >
                <button class="player-iconfont-volume" aria-label="静音">
                  <span class="bp-svgicon">
                    <img
                      src="@/assets/icon/yinliang.svg"
                      v-show="volume != 0"
                      width="24"
                      alt=""
                      srcset=""
                    />
                    <img
                      src="@/assets/icon/jingyin.svg"
                      v-show="volume == 0"
                      width="24"
                      alt=""
                      srcset=""
                    />
                  </span>
                </button>
                <!-- 音量条 -->
                <div
                  class="player-video-volumebar-wrap"
                  :class="showVolumeBar ? 'show' : ''"
                >
                  <div class="player-video-volume-num">{{ volume }}</div>
                  <!-- 音量条总高度 -->
                  <div
                    class="player-video-volumebar"
                    @mousedown="startAdjustVolume"
                  >
                    <div class="bui-track">
                      <div class="bui-bar-wrap" ref="volumeBarWrap">
                        <!-- 当前音量 -->
                        <div
                          class="bui-bar"
                          role="progressbar"
                          :style="{ transform: `scaleY(${volumePercentage})` }"
                        ></div>
                      </div>
                      <!-- 音量图标小球 -->
                      <div
                        class="bui-thumb"
                        :style="{ bottom: `${volumePercentage * 100}%` }"
                      >
                        <div id="volume_dot" class="bui-thumb-dot"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 设置 -->
              <div class="player-video-btn-setting">
                <button class="player-iconfont-setting" aria-label="设置">
                  <span class="bp-svgicon"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 88 88"
                      width="88"
                      height="88"
                      preserveAspectRatio="xMidYMid meet"
                      style="
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0px, 0px, 0px);
                      "
                    >
                      <defs>
                        <clipPath id="__lottie_element_197">
                          <rect width="88" height="88" x="0" y="0"></rect>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#__lottie_element_197)">
                        <g
                          transform="matrix(1,0,0,1,44,43.875)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M0,8.125 C-4.420000076293945,8.125 -8,4.545000076293945 -8,0.125 C-8,-4.295000076293945 -4.420000076293945,-7.875 0,-7.875 C4.420000076293945,-7.875 8,-4.295000076293945 8,0.125 C8,4.545000076293945 4.420000076293945,8.125 0,8.125z M0,16.125 C8.84000015258789,16.125 16,8.96500015258789 16,0.125 C16,-8.71500015258789 8.84000015258789,-15.875 0,-15.875 C-8.84000015258789,-15.875 -16,-8.71500015258789 -16,0.125 C-16,8.96500015258789 -8.84000015258789,16.125 0,16.125z M4.539999961853027,27.51099967956543 C3.059999942779541,27.750999450683594 1.5499999523162842,27.871000289916992 0,27.871000289916992 C-1.5499999523162842,27.871000289916992 -3.059999942779541,27.750999450683594 -4.539999961853027,27.51099967956543 C-4.539999961853027,27.51099967956543 -8.699999809265137,32.56100082397461 -8.699999809265137,32.56100082397461 C-9.9399995803833,34.07099914550781 -12.100000381469727,34.46099853515625 -13.789999961853027,33.48099899291992 C-13.789999961853027,33.48099899291992 -21.780000686645508,28.871000289916992 -21.780000686645508,28.871000289916992 C-23.469999313354492,27.891000747680664 -24.209999084472656,25.83099937438965 -23.520000457763672,24.000999450683594 C-23.520000457763672,24.000999450683594 -21.290000915527344,18.06100082397461 -21.290000915527344,18.06100082397461 C-23.3799991607666,15.621000289916992 -25.049999237060547,12.810999870300293 -26.209999084472656,9.76099967956543 C-26.209999084472656,9.76099967956543 -32.65999984741211,8.680999755859375 -32.65999984741211,8.680999755859375 C-34.59000015258789,8.361000061035156 -36,6.690999984741211 -36,4.741000175476074 C-36,4.741000175476074 -36,-4.488999843597412 -36,-4.488999843597412 C-36,-6.439000129699707 -34.59000015258789,-8.109000205993652 -32.65999984741211,-8.428999900817871 C-32.65999984741211,-8.428999900817871 -26.399999618530273,-9.479000091552734 -26.399999618530273,-9.479000091552734 C-25.309999465942383,-12.559000015258789 -23.690000534057617,-15.388999938964844 -21.65999984741211,-17.868999481201172 C-21.65999984741211,-17.868999481201172 -23.959999084472656,-23.999000549316406 -23.959999084472656,-23.999000549316406 C-24.639999389648438,-25.839000701904297 -23.899999618530273,-27.888999938964844 -22.209999084472656,-28.868999481201172 C-22.209999084472656,-28.868999481201172 -14.220000267028809,-33.479000091552734 -14.220000267028809,-33.479000091552734 C-12.529999732971191,-34.45899963378906 -10.380000114440918,-34.069000244140625 -9.130000114440918,-32.558998107910156 C-9.130000114440918,-32.558998107910156 -5.099999904632568,-27.659000396728516 -5.099999904632568,-27.659000396728516 C-3.450000047683716,-27.9689998626709 -1.7400000095367432,-28.128999710083008 0,-28.128999710083008 C1.7400000095367432,-28.128999710083008 3.450000047683716,-27.9689998626709 5.099999904632568,-27.659000396728516 C5.099999904632568,-27.659000396728516 9.130000114440918,-32.558998107910156 9.130000114440918,-32.558998107910156 C10.380000114440918,-34.069000244140625 12.529999732971191,-34.45899963378906 14.220000267028809,-33.479000091552734 C14.220000267028809,-33.479000091552734 22.209999084472656,-28.868999481201172 22.209999084472656,-28.868999481201172 C23.899999618530273,-27.888999938964844 24.639999389648438,-25.839000701904297 23.959999084472656,-23.999000549316406 C23.959999084472656,-23.999000549316406 21.65999984741211,-17.868999481201172 21.65999984741211,-17.868999481201172 C23.690000534057617,-15.388999938964844 25.309999465942383,-12.559000015258789 26.399999618530273,-9.479000091552734 C26.399999618530273,-9.479000091552734 32.65999984741211,-8.428999900817871 32.65999984741211,-8.428999900817871 C34.59000015258789,-8.109000205993652 36,-6.439000129699707 36,-4.488999843597412 C36,-4.488999843597412 36,4.741000175476074 36,4.741000175476074 C36,6.690999984741211 34.59000015258789,8.361000061035156 32.65999984741211,8.680999755859375 C32.65999984741211,8.680999755859375 26.209999084472656,9.76099967956543 26.209999084472656,9.76099967956543 C25.049999237060547,12.810999870300293 23.3799991607666,15.621000289916992 21.290000915527344,18.06100082397461 C21.290000915527344,18.06100082397461 23.520000457763672,24.000999450683594 23.520000457763672,24.000999450683594 C24.209999084472656,25.83099937438965 23.469999313354492,27.891000747680664 21.780000686645508,28.871000289916992 C21.780000686645508,28.871000289916992 13.789999961853027,33.48099899291992 13.789999961853027,33.48099899291992 C12.100000381469727,34.46099853515625 9.9399995803833,34.07099914550781 8.699999809265137,32.56100082397461 C8.699999809265137,32.56100082397461 4.539999961853027,27.51099967956543 4.539999961853027,27.51099967956543z"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </span>
                </button>
              </div>
              <!-- 开启画中画 -->
              <div class="player-video-btn-pip">
                <button class="player-iconfont-pip-on" aria-label="画中画" @click="togglePip">
                  <span class="bp-svgicon"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 88 88"
                      width="88"
                      height="88"
                      preserveAspectRatio="xMidYMid meet"
                      style="
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0px, 0px, 0px);
                      "
                    >
                      <defs>
                        <clipPath id="__lottie_element_304">
                          <rect width="88" height="88" x="0" y="0"></rect>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#__lottie_element_304)">
                        <g
                          transform="matrix(1,0,0,1,41,41)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M26,-28 C30.420000076293945,-28 34,-24.420000076293945 34,-20 C34,-20 34,4 34,4 C34,4 26,4 26,4 C26,4 26,-16.799999237060547 26,-16.799999237060547 C26,-18.56999969482422 24.56999969482422,-20 22.799999237060547,-20 C22.799999237060547,-20 -22.799999237060547,-20 -22.799999237060547,-20 C-24.510000228881836,-20 -25.899999618530273,-18.65999984741211 -25.989999771118164,-16.979999542236328 C-25.989999771118164,-16.979999542236328 -26,-16.799999237060547 -26,-16.799999237060547 C-26,-16.799999237060547 -26,16.799999237060547 -26,16.799999237060547 C-26,18.510000228881836 -24.65999984741211,19.899999618530273 -22.979999542236328,19.989999771118164 C-22.979999542236328,19.989999771118164 -22.799999237060547,20 -22.799999237060547,20 C-22.799999237060547,20 2,20 2,20 C2,20 2,28 2,28 C2,28 -26,28 -26,28 C-30.420000076293945,28 -34,24.420000076293945 -34,20 C-34,20 -34,-20 -34,-20 C-34,-24.420000076293945 -30.420000076293945,-28 -26,-28 C-26,-28 26,-28 26,-28z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,67,65)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M16,-8 C16,-8 16,8 16,8 C16,10.208999633789062 14.208999633789062,12 12,12 C12,12 -12,12 -12,12 C-14.208999633789062,12 -16,10.208999633789062 -16,8 C-16,8 -16,-8 -16,-8 C-16,-10.208999633789062 -14.208999633789062,-12 -12,-12 C-12,-12 12,-12 12,-12 C14.208999633789062,-12 16,-10.208999633789062 16,-8z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,30.496000289916992,33.74300003051758)"
                          opacity="0.09642399999499247"
                          style="display: none"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-4.038000106811523,-9.809000015258789 C-4.038000106811523,-9.809000015258789 2.2820000648498535,-3.499000072479248 2.2820000648498535,-3.499000072479248 C2.2820000648498535,-3.499000072479248 2.2820000648498535,-7.599999904632568 2.2820000648498535,-7.599999904632568 C2.2820000648498535,-8.65999984741211 3.0920000076293945,-9.520000457763672 4.131999969482422,-9.600000381469727 C4.131999969482422,-9.600000381469727 4.2820000648498535,-9.600000381469727 4.2820000648498535,-9.600000381469727 C4.2820000648498535,-9.600000381469727 8.281999588012695,-9.600000381469727 8.281999588012695,-9.600000381469727 C9.331999778747559,-9.600000381469727 10.192000389099121,-8.788999557495117 10.272000312805176,-7.749000072479248 C10.272000312805176,-7.749000072479248 10.281999588012695,-7.599999904632568 10.281999588012695,-7.599999904632568 C10.281999588012695,-7.599999904632568 10.281999588012695,8.399999618530273 10.281999588012695,8.399999618530273 C10.281999588012695,9.449999809265137 9.461999893188477,10.321000099182129 8.432000160217285,10.390999794006348 C8.432000160217285,10.390999794006348 8.281999588012695,10.399999618530273 8.281999588012695,10.399999618530273 C8.281999588012695,10.399999618530273 -7.7179999351501465,10.399999618530273 -7.7179999351501465,10.399999618530273 C-8.777999877929688,10.399999618530273 -9.637999534606934,9.581000328063965 -9.718000411987305,8.550999641418457 C-9.718000411987305,8.550999641418457 -9.718000411987305,8.399999618530273 -9.718000411987305,8.399999618530273 C-9.718000411987305,8.399999618530273 -9.718000411987305,4.400000095367432 -9.718000411987305,4.400000095367432 C-9.718000411987305,3.3399999141693115 -8.907999992370605,2.4800000190734863 -7.868000030517578,2.4000000953674316 C-7.868000030517578,2.4000000953674316 -7.7179999351501465,2.4000000953674316 -7.7179999351501465,2.4000000953674316 C-7.7179999351501465,2.4000000953674316 -3.138000011444092,2.4000000953674316 -3.138000011444092,2.4000000953674316 C-3.138000011444092,2.4000000953674316 -9.687999725341797,-4.159999847412109 -9.687999725341797,-4.159999847412109 C-10.477999687194824,-4.940000057220459 -10.477999687194824,-6.199999809265137 -9.687999725341797,-6.989999771118164 C-9.687999725341797,-6.989999771118164 -6.868000030517578,-9.809000015258789 -6.868000030517578,-9.809000015258789 C-6.078000068664551,-10.598999977111816 -4.817999839782715,-10.598999977111816 -4.038000106811523,-9.809000015258789z"
                            ></path>
                          </g>
                        </g>
                      </g></svg
                  ></span>
                </button>
              </div>
              <!-- 网页全屏 -->
              <div class="player-video-web-fullscreen" aria-label="网页全屏">
                <button class="player-iconfont-web-fullscreen">
                  <span class="bp-svgicon"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 88 88"
                      width="88"
                      height="88"
                      preserveAspectRatio="xMidYMid meet"
                      style="
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0px, 0px, 0px);
                      "
                    >
                      <defs>
                        <clipPath id="__lottie_element_284">
                          <rect width="88" height="88" x="0" y="0"></rect>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#__lottie_element_284)">
                        <g
                          transform="matrix(1,0,0,1,44,44)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-14,-20 C-14,-20 -26,-20 -26,-20 C-27.049999237060547,-20 -27.920000076293945,-19.18000030517578 -27.989999771118164,-18.149999618530273 C-27.989999771118164,-18.149999618530273 -28,-18 -28,-18 C-28,-18 -28,-6 -28,-6 C-28,-4.949999809265137 -27.18000030517578,-4.079999923706055 -26.149999618530273,-4.010000228881836 C-26.149999618530273,-4.010000228881836 -26,-4 -26,-4 C-26,-4 -22,-4 -22,-4 C-20.950000762939453,-4 -20.079999923706055,-4.820000171661377 -20.010000228881836,-5.849999904632568 C-20.010000228881836,-5.849999904632568 -20,-6 -20,-6 C-20,-6 -20,-12 -20,-12 C-20,-12 -14,-12 -14,-12 C-12.949999809265137,-12 -12.079999923706055,-12.819999694824219 -12.010000228881836,-13.850000381469727 C-12.010000228881836,-13.850000381469727 -12,-14 -12,-14 C-12,-14 -12,-18 -12,-18 C-12,-19.049999237060547 -12.819999694824219,-19.920000076293945 -13.850000381469727,-19.989999771118164 C-13.850000381469727,-19.989999771118164 -14,-20 -14,-20z M26,-20 C26,-20 14,-20 14,-20 C12.949999809265137,-20 12.079999923706055,-19.18000030517578 12.010000228881836,-18.149999618530273 C12.010000228881836,-18.149999618530273 12,-18 12,-18 C12,-18 12,-14 12,-14 C12,-12.949999809265137 12.819999694824219,-12.079999923706055 13.850000381469727,-12.010000228881836 C13.850000381469727,-12.010000228881836 14,-12 14,-12 C14,-12 20,-12 20,-12 C20,-12 20,-6 20,-6 C20,-4.949999809265137 20.81999969482422,-4.079999923706055 21.850000381469727,-4.010000228881836 C21.850000381469727,-4.010000228881836 22,-4 22,-4 C22,-4 26,-4 26,-4 C27.049999237060547,-4 27.920000076293945,-4.820000171661377 27.989999771118164,-5.849999904632568 C27.989999771118164,-5.849999904632568 28,-6 28,-6 C28,-6 28,-18 28,-18 C28,-19.049999237060547 27.18000030517578,-19.920000076293945 26.149999618530273,-19.989999771118164 C26.149999618530273,-19.989999771118164 26,-20 26,-20z M-22,4 C-22,4 -26,4 -26,4 C-27.049999237060547,4 -27.920000076293945,4.820000171661377 -27.989999771118164,5.849999904632568 C-27.989999771118164,5.849999904632568 -28,6 -28,6 C-28,6 -28,18 -28,18 C-28,19.049999237060547 -27.18000030517578,19.920000076293945 -26.149999618530273,19.989999771118164 C-26.149999618530273,19.989999771118164 -26,20 -26,20 C-26,20 -14,20 -14,20 C-12.949999809265137,20 -12.079999923706055,19.18000030517578 -12.010000228881836,18.149999618530273 C-12.010000228881836,18.149999618530273 -12,18 -12,18 C-12,18 -12,14 -12,14 C-12,12.949999809265137 -12.819999694824219,12.079999923706055 -13.850000381469727,12.010000228881836 C-13.850000381469727,12.010000228881836 -14,12 -14,12 C-14,12 -20,12 -20,12 C-20,12 -20,6 -20,6 C-20,4.949999809265137 -20.81999969482422,4.079999923706055 -21.850000381469727,4.010000228881836 C-21.850000381469727,4.010000228881836 -22,4 -22,4z M26,4 C26,4 22,4 22,4 C20.950000762939453,4 20.079999923706055,4.820000171661377 20.010000228881836,5.849999904632568 C20.010000228881836,5.849999904632568 20,6 20,6 C20,6 20,12 20,12 C20,12 14,12 14,12 C12.949999809265137,12 12.079999923706055,12.819999694824219 12.010000228881836,13.850000381469727 C12.010000228881836,13.850000381469727 12,14 12,14 C12,14 12,18 12,18 C12,19.049999237060547 12.819999694824219,19.920000076293945 13.850000381469727,19.989999771118164 C13.850000381469727,19.989999771118164 14,20 14,20 C14,20 26,20 26,20 C27.049999237060547,20 27.920000076293945,19.18000030517578 27.989999771118164,18.149999618530273 C27.989999771118164,18.149999618530273 28,18 28,18 C28,18 28,6 28,6 C28,4.949999809265137 27.18000030517578,4.079999923706055 26.149999618530273,4.010000228881836 C26.149999618530273,4.010000228881836 26,4 26,4z M28,-28 C32.41999816894531,-28 36,-24.420000076293945 36,-20 C36,-20 36,20 36,20 C36,24.420000076293945 32.41999816894531,28 28,28 C28,28 -28,28 -28,28 C-32.41999816894531,28 -36,24.420000076293945 -36,20 C-36,20 -36,-20 -36,-20 C-36,-24.420000076293945 -32.41999816894531,-28 -28,-28 C-28,-28 28,-28 28,-28z"
                            ></path>
                          </g>
                        </g>
                      </g></svg
                  ></span>
                </button>
              </div>
              <!-- 全屏 -->
              <div class="player-video-btn-fullscreen">
                <button class="player-iconfont-fullscreen" @click="toggleFullScreen">
                  <span class="bp-svgicon"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 88 88"
                      width="88"
                      height="88"
                      preserveAspectRatio="xMidYMid meet"
                      style="
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0px, 0px, 0px);
                      "
                    >
                      <defs>
                        <clipPath id="__lottie_element_202">
                          <rect width="88" height="88" x="0" y="0"></rect>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#__lottie_element_202)">
                        <g
                          transform="matrix(1,0,0,1,44,74.22000122070312)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M19.219999313354492,0.2199999988079071 C7.480000019073486,7.630000114440918 -7.480000019073486,7.630000114440918 -19.219999313354492,0.2199999988079071 C-19.219999313354492,0.2199999988079071 -16.219999313354492,-5.78000020980835 -16.219999313354492,-5.78000020980835 C-6.389999866485596,0.75 6.409999847412109,0.75 16.239999771118164,-5.78000020980835 C16.239999771118164,-5.78000020980835 19.219999313354492,0.2199999988079071 19.219999313354492,0.2199999988079071z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,68.58000183105469,27.895000457763672)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 4.78000020980835,16.104999542236328 4.78000020980835,16.104999542236328 C4.78000020980835,16.104999542236328 4.78000020980835,14.635000228881836 4.78000020980835,14.635000228881836 C4.25,4.054999828338623 -1.940000057220459,-5.425000190734863 -11.420000076293945,-10.164999961853027 C-11.420000076293945,-10.164999961853027 -8.479999542236328,-16.104999542236328 -8.479999542236328,-16.104999542236328 C3.7200000286102295,-10.005000114440918 11.420000076293945,2.4649999141693115 11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,19.450000762939453,27.895000457763672)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -11.449999809265137,16.104999542236328 -11.449999809265137,16.104999542236328 C-11.449999809265137,2.4649999141693115 -3.75,-10.005000114440918 8.449999809265137,-16.104999542236328 C8.449999809265137,-16.104999542236328 11.449999809265137,-10.164999961853027 11.449999809265137,-10.164999961853027 C1.4900000095367432,-5.204999923706055 -4.809999942779541,4.974999904632568 -4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,44.0099983215332,65.96499633789062)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-0.009999999776482582,5.34499979019165 C-5.46999979019165,5.355000019073486 -10.800000190734863,3.7149999141693115 -15.319999694824219,0.6549999713897705 C-15.319999694824219,0.6549999713897705 -12.319999694824219,-5.34499979019165 -12.319999694824219,-5.34499979019165 C-5,0.08500000089406967 5,0.08500000089406967 12.319999694824219,-5.34499979019165 C12.319999694824219,-5.34499979019165 15.319999694824219,0.6549999713897705 15.319999694824219,0.6549999713897705 C10.800000190734863,3.7249999046325684 5.460000038146973,5.355000019073486 -0.009999999776482582,5.34499979019165z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,62.275001525878906,31.780000686645508)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,12.220000267028809 9.015000343322754,12.220000267028809 C9.015000343322754,12.220000267028809 2.434999942779541,12.220000267028809 2.434999942779541,12.220000267028809 C2.434999942779541,12.220000267028809 2.434999942779541,11.220000267028809 2.434999942779541,11.220000267028809 C2.075000047683716,3.740000009536743 -2.305000066757202,-2.9700000286102295 -9.015000343322754,-6.309999942779541 C-9.015000343322754,-6.309999942779541 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C-6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C2.7850000858306885,-7.800000190734863 8.524999618530273,1.0099999904632568 9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,25.729999542236328,31.780000686645508)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M-2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -9.050000190734863,12.220000267028809 -9.050000190734863,12.220000267028809 C-9.050000190734863,1.8700000047683716 -3.2100000381469727,-7.590000152587891 6.050000190734863,-12.220000267028809 C6.050000190734863,-12.220000267028809 9.050000190734863,-6.309999942779541 9.050000190734863,-6.309999942779541 C2.0199999809265137,-2.809999942779541 -2.430000066757202,4.360000133514404 -2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,44,57.654998779296875)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M0,4.974999904632568 C-4.110000133514404,4.994999885559082 -8.119999885559082,3.6449999809265137 -11.380000114440918,1.1349999904632568 C-11.380000114440918,1.1349999904632568 -8.319999694824219,-4.974999904632568 -8.319999694824219,-4.974999904632568 C-3.6700000762939453,-0.5049999952316284 3.6700000762939453,-0.5049999952316284 8.319999694824219,-4.974999904632568 C8.319999694824219,-4.974999904632568 11.380000114440918,1.1349999904632568 11.380000114440918,1.1349999904632568 C8.109999656677246,3.634999990463257 4.110000133514404,4.985000133514404 0,4.974999904632568 C0,4.974999904632568 0,4.974999904632568 0,4.974999904632568z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,55.9900016784668,35.665000915527344)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,8.335000038146973 6.619999885559082,8.335000038146973 C6.619999885559082,8.335000038146973 0.009999999776482582,8.335000038146973 0.009999999776482582,8.335000038146973 C0.009999999776482582,3.7850000858306885 -2.549999952316284,-0.375 -6.619999885559082,-2.4049999713897705 C-6.619999885559082,-2.4049999713897705 -3.619999885559082,-8.335000038146973 -3.619999885559082,-8.335000038146973 C2.380000114440918,-5.324999809265137 6.300000190734863,0.6949999928474426 6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,31.9950008392334,35.665000915527344)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M6.635000228881836,-2.4049999713897705 C2.565000057220459,-0.375 0.004999999888241291,3.7850000858306885 0.004999999888241291,8.335000038146973 C0.004999999888241291,8.335000038146973 -6.635000228881836,8.335000038146973 -6.635000228881836,8.335000038146973 C-6.635000228881836,1.274999976158142 -2.6449999809265137,-5.184999942779541 3.674999952316284,-8.335000038146973 C3.674999952316284,-8.335000038146973 6.635000228881836,-2.4049999713897705 6.635000228881836,-2.4049999713897705z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,44,66.322998046875)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M8.319000244140625,-13.677000045776367 C8.319000244140625,-13.677000045776367 19.2189998626709,8.123000144958496 19.2189998626709,8.123000144958496 C13.659000396728516,11.642999649047852 7.068999767303467,13.67300033569336 -0.0010000000474974513,13.67300033569336 C-7.071000099182129,13.67300033569336 -13.66100025177002,11.642999649047852 -19.22100067138672,8.123000144958496 C-19.22100067138672,8.123000144958496 -8.321000099182129,-13.677000045776367 -8.321000099182129,-13.677000045776367 C-6.160999774932861,-11.597000122070312 -3.2309999465942383,-10.32699966430664 -0.0010000000474974513,-10.32699966430664 C3.2290000915527344,-10.32699966430664 6.169000148773193,-11.597000122070312 8.319000244140625,-13.677000045776367z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,64.68399810791016,27.89699935913086)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M15.314000129699707,16.10700035095215 C15.314000129699707,16.10700035095215 -8.685999870300293,16.10700035095215 -8.685999870300293,16.10700035095215 C-8.685999870300293,11.406999588012695 -11.38599967956543,7.336999893188477 -15.315999984741211,5.367000102996826 C-15.315999984741211,5.367000102996826 -4.576000213623047,-16.10300064086914 -4.576000213623047,-16.10300064086914 C7.214000225067139,-10.192999839782715 15.314000129699707,2.006999969482422 15.314000129699707,16.10700035095215z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,23.31599998474121,27.89699935913086)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M4.584000110626221,-16.10300064086914 C4.584000110626221,-16.10300064086914 15.314000129699707,5.367000102996826 15.314000129699707,5.367000102996826 C11.383999824523926,7.336999893188477 8.684000015258789,11.406999588012695 8.684000015258789,16.10700035095215 C8.684000015258789,16.10700035095215 -15.315999984741211,16.10700035095215 -15.315999984741211,16.10700035095215 C-15.315999984741211,2.006999969482422 -7.216000080108643,-10.192999839782715 4.584000110626221,-16.10300064086914z"
                            ></path>
                          </g>
                        </g>
                        <g
                          transform="matrix(1,0,0,1,44,44)"
                          opacity="1"
                          style="display: block"
                        >
                          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                            <path
                              fill="rgb(255,255,255)"
                              fill-opacity="1"
                              d=" M0,-4 C2.140000104904175,-4 3.890000104904175,-2.319999933242798 4,-0.20000000298023224 C4,-0.20000000298023224 4,0 4,0 C4,0 4,0.20000000298023224 4,0.20000000298023224 C3.890000104904175,2.319999933242798 2.140000104904175,4 0,4 C-2.2100000381469727,4 -4,2.2100000381469727 -4,0 C-4,-2.2100000381469727 -2.2100000381469727,-4 0,-4z"
                            ></path>
                          </g>
                        </g>
                      </g></svg
                  ></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 发弹幕区域 -->
      <div class="player-sending-area">
        <div class="player-sending-bar">
          <div class="player-video-info">
            <div class="player-video-info-online">
              <b>100</b>
              人正在看
            </div>
            <div class="player-video-info-divide">,</div>
            <div class="player-video-info-dm">
              已装填 {{ barrageCounts }} 条弹幕
            </div>
          </div>
          <!-- 弹幕设置开关 -->
          <div class="player-dm-root">
            <div class="player-dm-switch" aria-label="弹幕显示隐藏">
              <!-- 弹幕开启关闭切换 -->
              <input
                class="player-dm-switch-input"
                type="checkbox"
                checked=""
                aria-label="弹幕"
                style="pointer-events: initial"
                @change="openBarrageHandleToggle"
              />
              <label class="bui-danmaku-switch-label">
                <span
                  class="bui-danmaku-switch-on"
                  :class="isBarrageBarAvailable ? '' : 'hidden'"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    data-pointer="none"
                    viewBox="0 0 24 24"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M11.989 4.828c-.47 0-.975.004-1.515.012l-1.71-2.566a1.008 1.008 0 0 0-1.678 1.118l.999 1.5c-.681.018-1.403.04-2.164.068a4.013 4.013 0 0 0-3.83 3.44c-.165 1.15-.245 2.545-.245 4.185 0 1.965.115 3.67.35 5.116a4.012 4.012 0 0 0 3.763 3.363l.906.046c1.205.063 1.808.095 3.607.095a.988.988 0 0 0 0-1.975c-1.758 0-2.339-.03-3.501-.092l-.915-.047a2.037 2.037 0 0 1-1.91-1.708c-.216-1.324-.325-2.924-.325-4.798 0-1.563.076-2.864.225-3.904.14-.977.96-1.713 1.945-1.747 2.444-.087 4.465-.13 6.063-.131 1.598 0 3.62.044 6.064.13.96.034 1.71.81 1.855 1.814.075.524.113 1.962.141 3.065v.002c.01.342.017.65.025.88a.987.987 0 1 0 1.974-.068c-.008-.226-.016-.523-.025-.856v-.027c-.03-1.118-.073-2.663-.16-3.276-.273-1.906-1.783-3.438-3.74-3.507-.9-.032-1.743-.058-2.531-.078l1.05-1.46a1.008 1.008 0 0 0-1.638-1.177l-1.862 2.59c-.38-.004-.744-.007-1.088-.007h-.13Zm.521 4.775h-1.32v4.631h2.222v.847h-2.618v1.078h2.618l.003.678c.36.026.714.163 1.01.407h.11v-1.085h2.694v-1.078h-2.695v-.847H16.8v-4.63h-1.276a8.59 8.59 0 0 0 .748-1.42L15.183 7.8a14.232 14.232 0 0 1-.814 1.804h-1.518l.693-.308a8.862 8.862 0 0 0-.814-1.408l-1.045.352c.297.396.572.847.825 1.364Zm-4.18 3.564.154-1.485h1.98V8.294h-3.2v.98H9.33v1.43H7.472l-.308 3.453h2.277c0 1.166-.044 1.925-.12 2.277-.078.352-.386.528-.936.528-.308 0-.616-.022-.902-.055l.297 1.067.062.005c.285.02.551.04.818.04 1.001-.067 1.562-.419 1.694-1.057.11-.638.176-1.903.176-3.795h-2.2Zm7.458.11v-.858h-1.254v.858h1.254Zm-2.376-.858v.858h-1.199v-.858h1.2Zm-1.199-.946h1.2v-.902h-1.2v.902Zm2.321 0v-.902h1.254v.902h-1.254Z"
                      clip-rule="evenodd"
                    ></path>
                    <path
                      fill="#00AEEC"
                      fill-rule="evenodd"
                      d="M22.846 14.627a1 1 0 0 0-1.412.075l-5.091 5.703-2.216-2.275-.097-.086-.008-.005a1 1 0 0 0-1.322 1.493l2.963 3.041.093.083.007.005c.407.315 1 .27 1.354-.124l5.81-6.505.08-.102.005-.008a1 1 0 0 0-.166-1.295Z"
                      clip-rule="evenodd"
                    ></path></svg
                ></span>
                <span
                  class="bui-danmaku-switch-off"
                  :class="!isBarrageBarAvailable ? '' : 'hidden'"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    data-pointer="none"
                    viewBox="0 0 24 24"
                  >
                    <path
                      fill-rule="evenodd"
                      d="m8.085 4.891-.999-1.499a1.008 1.008 0 0 1 1.679-1.118l1.709 2.566c.54-.008 1.045-.012 1.515-.012h.13c.345 0 .707.003 1.088.007l1.862-2.59a1.008 1.008 0 0 1 1.637 1.177l-1.049 1.46c.788.02 1.631.046 2.53.078 1.958.069 3.468 1.6 3.74 3.507.088.613.13 2.158.16 3.276l.001.027c.01.333.017.63.025.856a.987.987 0 0 1-1.974.069c-.008-.23-.016-.539-.025-.881v-.002c-.028-1.103-.066-2.541-.142-3.065-.143-1.004-.895-1.78-1.854-1.813-2.444-.087-4.466-.13-6.064-.131-1.598 0-3.619.044-6.063.13a2.037 2.037 0 0 0-1.945 1.748c-.15 1.04-.225 2.341-.225 3.904 0 1.874.11 3.474.325 4.798.154.949.95 1.66 1.91 1.708a97.58 97.58 0 0 0 5.416.139.988.988 0 0 1 0 1.975c-2.196 0-3.61-.047-5.513-.141A4.012 4.012 0 0 1 2.197 17.7c-.236-1.446-.351-3.151-.351-5.116 0-1.64.08-3.035.245-4.184A4.013 4.013 0 0 1 5.92 4.96c.761-.027 1.483-.05 2.164-.069Zm4.436 4.707h-1.32v4.63h2.222v.848h-2.618v1.078h2.431a5.01 5.01 0 0 1 3.575-3.115V9.598h-1.276a8.59 8.59 0 0 0 .748-1.42l-1.089-.384a14.232 14.232 0 0 1-.814 1.804h-1.518l.693-.308a8.862 8.862 0 0 0-.814-1.408l-1.045.352c.297.396.572.847.825 1.364Zm-4.18 3.564.154-1.485h1.98V8.289h-3.2v.979h2.067v1.43H7.483l-.308 3.454h2.277c0 1.166-.044 1.925-.12 2.277-.078.352-.386.528-.936.528-.308 0-.616-.022-.902-.055l.297 1.067.062.004c.285.02.551.04.818.04 1.001-.066 1.562-.418 1.694-1.056.11-.638.176-1.903.176-3.795h-2.2Zm7.458.11v-.858h-1.254v.858H15.8Zm-2.376-.858v.858h-1.199v-.858h1.2Zm-1.199-.946h1.2v-.902h-1.2v.902Zm2.321 0v-.902H15.8v.902h-1.254Zm3.517 10.594a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-.002-1.502a2.5 2.5 0 0 1-2.217-3.657l3.326 3.398a2.49 2.49 0 0 1-1.109.259Zm2.5-2.5c0 .42-.103.815-.286 1.162l-3.328-3.401a2.5 2.5 0 0 1 3.614 2.239Z"
                      clip-rule="evenodd"
                    ></path></svg
                ></span>
              </label>
              <span class="choose_danmaku">关闭弹幕 (d)</span>
            </div>
            <div
              class="player-dm-setting"
              :class="isBarrageBarAvailable ? '' : 'disabled'"
            >
              <!-- 弹幕设置 -->
              <span class="svg-dm-setting">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  data-pointer="none"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill-rule="evenodd"
                    d="m15.645 4.881 1.06-1.473a.998.998 0 1 0-1.622-1.166L13.22 4.835a110.67 110.67 0 0 0-1.1-.007h-.131c-.47 0-.975.004-1.515.012L8.783 2.3A.998.998 0 0 0 7.12 3.408l.988 1.484c-.688.019-1.418.042-2.188.069a4.013 4.013 0 0 0-3.83 3.44c-.165 1.15-.245 2.545-.245 4.185 0 1.965.115 3.67.35 5.116a4.012 4.012 0 0 0 3.763 3.363c1.903.094 3.317.141 5.513.141a.988.988 0 0 0 0-1.975 97.58 97.58 0 0 1-5.416-.139 2.037 2.037 0 0 1-1.91-1.708c-.216-1.324-.325-2.924-.325-4.798 0-1.563.076-2.864.225-3.904.14-.977.96-1.713 1.945-1.747 2.444-.087 4.465-.13 6.063-.131 1.598 0 3.62.044 6.064.13.96.034 1.71.81 1.855 1.814.075.524.113 1.962.141 3.065v.002c.005.183.01.07.014-.038.004-.096.008-.189.011-.081a.987.987 0 1 0 1.974-.069c-.004-.105-.007-.009-.011.09-.002.056-.004.112-.007.135l-.002.01a.574.574 0 0 1-.005-.091v-.027c-.03-1.118-.073-2.663-.16-3.276-.273-1.906-1.783-3.438-3.74-3.507-.905-.032-1.752-.058-2.543-.079Zm-3.113 4.703h-1.307v4.643h2.2v.04l.651-1.234c.113-.215.281-.389.482-.509v-.11h.235c.137-.049.283-.074.433-.074h1.553V9.584h-1.264a8.5 8.5 0 0 0 .741-1.405l-1.078-.381c-.24.631-.501 1.23-.806 1.786h-1.503l.686-.305c-.228-.501-.5-.959-.806-1.394l-1.034.348c.294.392.566.839.817 1.35Zm-1.7 5.502h2.16l-.564 1.068h-1.595v-1.068Zm-2.498-1.863.152-1.561h1.96V8.289H7.277v.969h2.048v1.435h-1.84l-.306 3.51h2.254c0 1.155-.043 1.906-.12 2.255-.076.348-.38.523-.925.523-.305 0-.61-.022-.893-.055l.294 1.056.061.005c.282.02.546.039.81.039.991-.065 1.547-.414 1.677-1.046.11-.631.175-1.883.175-3.757H8.334Zm5.09-.8v.85h-1.188v-.85h1.187Zm-1.188-.955h1.187v-.893h-1.187v.893Zm2.322.007v-.893h1.241v.893h-1.241Zm.528 2.757a1.26 1.26 0 0 1 1.087-.627l4.003-.009a1.26 1.26 0 0 1 1.094.63l1.721 2.982c.226.39.225.872-.001 1.263l-1.743 3a1.26 1.26 0 0 1-1.086.628l-4.003.009a1.26 1.26 0 0 1-1.094-.63l-1.722-2.982a1.26 1.26 0 0 1 .002-1.263l1.742-3Zm1.967.858a1.26 1.26 0 0 0-1.08.614l-.903 1.513a1.26 1.26 0 0 0-.002 1.289l.885 1.492c.227.384.64.62 1.086.618l2.192-.005a1.26 1.26 0 0 0 1.08-.615l.904-1.518a1.26 1.26 0 0 0 .001-1.288l-.884-1.489a1.26 1.26 0 0 0-1.086-.616l-2.193.005Zm2.517 2.76a1.4 1.4 0 1 1-2.8 0 1.4 1.4 0 0 1 2.8 0Z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
              </span>
            </div>
            <!-- 弹幕输入框区域 -->
            <div class="player-video-inputbar">
              <div class="player-video-inputbar-wrap">
                <div class="player-video-preview-emoji-wrap">
                  <!-- 这个图层功能未知 -->
                </div>
                <div
                  class="player-video-btn-danmaku"
                  :class="isBarrageBarAvailable ? '' : 'hidden'"
                >
                  <span class="player-iconfont-danmakutype">
                    <span class="danmakutype-svgicon"
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 22 22"
                      >
                        <path
                          d="M17 16H5c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zM6.96 15c.39 0 .74-.24.89-.6l.65-1.6h5l.66 1.6c.15.36.5.6.89.6.69 0 1.15-.71.88-1.34l-3.88-8.97C11.87 4.27 11.46 4 11 4s-.87.27-1.05.69l-3.88 8.97c-.27.63.2 1.34.89 1.34zM11 5.98L12.87 11H9.13L11 5.98z"
                        ></path>
                      </svg>
                    </span>
                  </span>
                </div>
                <!-- 弹幕禁用后提示信息 -->
                <div class="player-dm-wrap" style="">已关闭弹幕</div>
                <!-- 弹幕输入框 -->
                <input
                  class="player-video-danmaku-input"
                  :class="isBarrageBarAvailable ? '' : 'hidden'"
                  :disabled="!isBarrageBarAvailable"
                  placeholder="发个友善的弹幕见证当下"
                  ref="barrageInputRef"
                  v-model="barrageInputValue"
                  @keyup.enter="sendBarrage"
                  type="text"
                />
                <!-- 弹幕礼仪 -->
                <div class="player-video-hint">
                  <a href="#">
                    <span>弹幕礼仪</span>
                    <span class="bp-svgicon"
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 16"
                      >
                        <path
                          d="M9.188 7.999l-3.359 3.359a.75.75 0 101.061 1.061l3.889-3.889a.75.75 0 000-1.061L6.89 3.58a.75.75 0 10-1.061 1.061l3.359 3.358z"
                        ></path></svg
                    ></span>
                  </a>
                </div>
              </div>
              <button
                class="player-video-btn-send"
                :class="isBarrageBarAvailable ? '' : 'disabled'"
                @click="sendBarrage"
                :disabled="!isBarrageBarAvailable"
              >
                发送
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const XPlayerRef = ref(null); //定义当前播放器
const videoLoadError = ref(false); // 视频加载失败显示
const loadFailCount = ref(0); // 视频加载计数器
const isXPlayerStart = ref(false); //默认播放器状态
const playTime = ref(0 || "00.00"); //当前播放时间
const durationTime = ref(0 || "00.00"); //当前视频总时长
const progress = ref(0); // 视频播放进度
const progressbarRef = ref(null); //获取播放进度元素
const progressDot = ref(0); // 播放进度图标（小电视）
// 音量
const volume = ref(80); //当前音量 0-100
const volumeBarWrap = ref(null);
const showVolumeBar = ref(false); // 控制音量条显示的变量
// 倍速
const PlaybackRateList = ref([
  { playbackRate: 2.0, name: "2.0x" },
  { playbackRate: 1.5, name: "1.5x" },
  { playbackRate: 1.25, name: "1.25x" },
  { playbackRate: 1, name: "1.0x" },
  { playbackRate: 0.75, name: "0.75x" },
  { playbackRate: 0.5, name: "0.5x" },
]);
const selectedPlaybackRate = ref("倍速"); // 默认选择的倍速
const showPlaybackRateWrap = ref(false); // 默认不显示倍速窗口
// 清晰度
const QualityList = ref([
  { quality: "1080P 高清", name: "1080P 高清" },
  { quality: "720P 高清", name: "720P 高清" },
  { quality: "480P 清晰", name: "480P 清晰" },
  { quality: "360P 流畅", name: "360P 流畅" },
  { quality: "自动", name: "自动" },
]);
const selectedQuality = ref("自动"); // 默认选择的清晰度
const showQualityWrap = ref(false); //默认不显示清晰度窗口
// 字幕
const showSubtitle = ref(false); // 是否显示字幕
// 画中画功能
const isPipAvailable = ref(false); // 默认不开启画中画
// 弹幕相关设置比较多单独一排
// 显示弹幕
const showAllBarrage = ref(true); // 默认开启所有弹幕
const showBaseBarrage = ref(true); // 默认开启基础弹幕
const showAdvBarrage = ref(true); // 默认开启高级弹幕
const showMiddleBarrage = ref(true); // 默认开启中间弹幕
const baseBarrageRef = ref(null); //基础弹幕容器区域
let timer = null;
let barrageMap = {}; //用于跟踪弹幕是否显示在屏幕上
const barragePause = ref(false); // 控制弹幕暂停
const barragePauseMap = ref([]); // 保存暂停的动画
const startBarragePauseTime = ref(0); // 弹幕移动最后的时间
const barragePauseLastTime = ref(0); // 弹幕暂停时最后的时间
// 发送弹幕
const isBarrageBarAvailable = ref(true); //发送弹幕工具栏是否可用
let pausedBarrages = []; // 用于保存暂停时的弹幕状态
const barrageInputRef = ref(null); //弹幕输入框
const barrageInputValue = ref(""); //弹幕输入框的值

const props = defineProps({
  videoInfo: {
    type: Object,
    default: () => ({}),
  },
  barrageList: {
    type: Array,
    default: () => [],
  },
});

// 视频播放文件，后期对外暴露属性获取
const videoUrl = computed(() => props.videoInfo?.videoSrc || "");

//弹幕数组 发布内容/发布者/发布时间/弹幕类型
const barrageList = ref(props.barrageList || []);
// 总弹幕数
const barrageCounts = barrageList.value.length;

// 开启关闭弹幕
const openBarrageHandleToggle = () => {
  // 切换弹幕开关
  isBarrageBarAvailable.value = !isBarrageBarAvailable.value;
  console.log(isBarrageBarAvailable.value);
  if (isBarrageBarAvailable.value) {
    //可以则去掉disable设置
  } else {
    //否则给设置工具容器添加disable
  }
};

// 启动弹幕方法
const startBarrage = () => {
  if (timer) return; //避免计时器重复设置
  timer = setInterval(() => {
    const videoElement = XPlayerRef.value; //获取当前播放器元素
    if (videoElement && videoElement.currentTime) {
      // 遍历弹幕列表，找出当前时间应该显示的弹幕
      for (let i = 0; i < barrageList.value.length; i++) {
        const barrage = barrageList.value[i];
        const sendTimeSeconds = timeStringToSeconds(barrage.sendTime);
        // 如果弹幕发送时间在当前视频时间之前且不在屏幕上，则创建弹幕
        if (
          sendTimeSeconds <= videoElement.currentTime &&
          sendTimeSeconds >= videoElement.currentTime - 2 &&
          !barrageMap[barrage.barrage_id]
        ) {
          createBarrage(barrage);
          // 标记该弹幕已经在屏幕上 避免重复弹幕
          barrageMap[barrage.barrage_id] = true;
        }
      }
    }
  }, 1000);
};

//停止弹幕
const stopBarrage = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// 添加弹幕并调用动画方法
const createBarrage = (barrage) => {
  const barrageElement = document.createElement("div");
  barrageElement.textContent = `${barrage.content}:${barrage.sendTime}`; //${barrage.user}:
  barrageElement.className = "barrage"; //直接引用弹幕样式未生效，目前用来起别名使用
  //直接给新建标签设置样式
  barrageElement.style.position = "absolute";
  barrageElement.style.whiteSpace = "nowrap";
  barrageElement.style.left = "100%";
  barrageElement.style.color = "#fff";
  // barrageElement.style.top = `${Math.random() * 50}%`;
  // 设置弹幕垂直位置，这里假设有轨道逻辑，可以根据实际情况调整
  barrageElement.style.top = `${calculateBarrageTop(barrage)}%`;

  //当新建弹幕元素加入基础弹幕容器中
  baseBarrageRef.value.appendChild(barrageElement);

  // 开始弹幕动画
  animateBarrage(barrageElement, barrage.sendTime);
};

// 假设calculateBarrageTop是一个函数，用来计算弹幕的垂直位置
const calculateBarrageTop = (barrage) => {
  // 根据弹幕内容、用户或其他逻辑计算弹幕的垂直位置
  // 这里只是一个示例，返回一个随机值
  return Math.floor(Math.random() * 8) * 5; // 假设有8个轨道，每个轨道间隔5%
};

//弹幕动画
/**
 * element 弹幕元素
 * sendTime 弹幕发送时间
 * */
const animateBarrage = (element, sendTime) => {
  let start = null;
  // 动画逻辑
  const animate = (timestamp) => {
    let lastTime = 0; //记录最后时间
    if (!start) start = timestamp;
    lastTime = start;
    const deltaTime = timestamp - start;
    const newLeft = 100 - deltaTime / 70; //控制弹幕速度，增加除数
    element.style.left = `${newLeft}%`;
    //在动画中添加暂停
    if (!barragePause.value) {
      //非暂停状态

      // 弹幕移动位置+容器宽度所占当前容器的百分比大于0则显示弹幕，否则移除，人工智能给的计算是错的
      if (
        newLeft >=
        (-element.clientWidth / baseBarrageRef.value.offsetWidth) * 100
      ) {
        //只要弹幕元素在屏幕左侧出现就一直执行动画渲染
        requestAnimationFrame(animate);
      } else {
        element.remove();
        // 当弹幕移出屏幕时，从map中移除
        delete barrageMap[sendTime];
      }
    } else {
      //暂停状态
      // 将暂停的动画和当前动画时间加入暂停数组中
      barragePauseMap.value.push({
        animationFunction: animate,
        lastTime: lastTime,
      });
      cancelAnimationFrame(animate);
    }
  };
  // 执行弹幕动画
  requestAnimationFrame(animate);
};

// 暂停弹幕动画
const pauseBarrages = () => {
  console.log("暂停弹幕");
  barragePause.value = true;
};

// 继续弹幕动画
const resumeBarrages = () => {
  if (barragePause.value) {
    barragePause.value = false;
    //恢复之后 重新播放动画
    barragePauseMap.value.forEach((item) => {
      // 计算暂停期间经过的时间
      const pauseDuration = performance.now() - item.lastTime;
      // 更新开始时间，以便动画可以从正确的位置继续
      item.animationFunction(performance.now());
      // requestAnimationFrame(item.animationFunction);
    });
    // 清空暂停数组，防止重复恢复
    barragePauseMap.value = [];
  }
};

// 将时间字符串转换为秒
const timeStringToSeconds = (timeString) => {
  const [minutes, seconds] = timeString.split(".");
  return parseInt(minutes, 10) * 60 + parseFloat(seconds);
};

// 添加发送弹幕
const sendBarrage = () => {
  if (barrageInputValue.value.trim() === "") {
    return; // 如果输入为空，则不发送
  }
  const currentTime = XPlayerRef.value.currentTime;
  const currentTimeString = formatTime(currentTime).replace(":", ".");
  const newBarrage = {
    content: barrageInputValue.value, //输入的弹幕内容
    user: "当前用户", // 当前登录发布弹幕的用户
    sendTime: currentTimeString, //当前视频播放时间
    barrType: "base", //默认基础弹幕，后期通过增加高级弹幕功能可控制选择
  };
  // 将新弹幕添加到弹幕列表中，按照发送时间排序
  const index = barrageList.value.findIndex(
    (b) => b.sendTime > newBarrage.sendTime
  );
  if (index === -1) {
    barrageList.value.push(newBarrage);
  } else {
    barrageList.value.splice(index, 0, newBarrage);
  }
  // 将新弹幕内容加入弹幕数组后，清空输入框
  barrageInputValue.value = "";
};

// 封装弹幕方法 重新加载弹幕
const reloadBarrage = () => {
  // 清空弹幕map
  barrageMap = {};
  stopBarrage();
  startBarrage();
};

// 格式化时间
const formatTime = (time) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes < 10 ? "0" : ""}${minutes}:${
    seconds < 10 ? "0" : ""
  }${seconds}`;
};

// 计算属性，格式化当前时间和总时长
const formattedCurrentTime = computed(() => formatTime(playTime.value));
const formattedDuration = computed(() => formatTime(durationTime.value));

// 计算属性，计算当前音量条高度百分比
const volumePercentage = computed(() => {
  return (volume.value / 100) * 0.8; //乘以0.8
});

const doPlayVideo = () => {
  if (isXPlayerStart.value) {
    handlePause();
  } else {
    handlePlay();
    if (XPlayerRef.value.currentTime == 0) {
      //开始加载弹幕
      startBarrage();
    } else {
      //不是第一次播放视频则恢复弹幕
      resumeBarrages();
    }
  }
};

//播放视频
const handlePlay = () => {
  //修改播放器播放状态
  isXPlayerStart.value = true;
  //执行播放
  XPlayerRef.value.play();

  XPlayerRef.value.addEventListener("error", handleLoadError);
};

//如果加载视频资源失败，自动尝试重新加载，再失败则跳转到下一首歌
const handleLoadError = () => {
  loadFailCount.value += 1;

  if (loadFailCount.value >= 2) {
    // 如果加载失败两次，尝试播放下一首歌
    videoLoadError.value = true;
    isXPlayerStart.value = false;
  } else {
    // 尝试重新加载当前歌曲
    audioPlayer.value.load();
    console.log("尝试重新加载资源");
  }
};

//暂停视频
const handlePause = () => {
  //修改播放器播放状态
  isXPlayerStart.value = false;
  //暂停视频
  XPlayerRef.value.pause();
  //暂停弹幕
  pauseBarrages();
};

//更新进度和时间
const updateProgress = (event) => {
  const { currentTime, duration } = event.target; //获取播放器的当前时间和总时长
  progress.value = (currentTime / duration) * 100; //更新进度
  progressDot.value = progressbarRef.value.offsetWidth; //获取当前播放进度元素宽度赋值给播放图片，进行偏移
  playTime.value = currentTime; //更新当前时间
  durationTime.value = duration; //更新总时长
};

// 点击进度条设置播放进度
const setProgress = (event) => {
  //获取当前进度条元素，通过它可以获取该元素的坐标及宽高
  const rect = event.target.getBoundingClientRect();
  //计算当前鼠标点击的位置的X轴坐标
  const clickPosition = (event.clientX - rect.left) / rect.width;
  XPlayerRef.value.currentTime = clickPosition * XPlayerRef.value.duration;
  progress.value =
    (XPlayerRef.value.currentTime / XPlayerRef.value.duration) * 100;

  //播放/恢复弹幕
  // 当播放进度更新时，重新开始弹幕动画
  reloadBarrage();
};

//设置音量
const startAdjustVolume = (event) => {
  const adjustVolume = (e) => {
    const rect = volumeBarWrap.value.getBoundingClientRect();
    const mouseY = e.clientY;
    const relativeY = mouseY - rect.top;
    const volumeHeight = rect.height;
    let newVolume = (volumeHeight - relativeY) / volumeHeight;
    newVolume = Math.min(1, Math.max(0, newVolume));
    volume.value = Math.round(newVolume * 100);

    //设置音量 除以100，音量属性值在0-1之间
    XPlayerRef.value.volume = volume.value / 100;
  };

  const stopAdjustVolume = () => {
    document.removeEventListener("mousemove", adjustVolume);
    document.removeEventListener("mouseup", stopAdjustVolume);
  };

  adjustVolume(event);
  document.addEventListener("mousemove", adjustVolume);
  document.addEventListener("mouseup", stopAdjustVolume);
};

const adjustVolume = (event) => {
  const volumeBarHeight = event.target.clientHeight;
  const mouseY = event.clientY;
  const rect = event.target.getBoundingClientRect();
  const relativeY = mouseY - rect.top;

  // 计算音量并四舍五入到最近的整数
  volume.value = Math.round(
    ((volumeBarHeight - relativeY) / volumeBarHeight) * 100
  );
  volume.value = Math.max(0, Math.min(volume.value, 100)); // 限制音量在0到100之间
};

const stopAdjustVolume = () => {
  document.removeEventListener("mousemove", adjustVolume);
  document.removeEventListener("mouseup", stopAdjustVolume);
};

//显示音量条
const showVolumeBarVisiable = () => {
  showVolumeBar.value = true;
};

// 设置视频播放速度
const setPlaybackRate = (rateItem) => {
  if (XPlayerRef.value) {
    XPlayerRef.value.playbackRate = parseFloat(rateItem.playbackRate);
    showPlaybackRateWrap.value = false;
    selectedPlaybackRate.value =
      rateItem.name === "1.0x" ? "倍速" : rateItem.name;
  }
};

// 设置视频清晰度
const setVideoQuality = (qualityValue) => {
  console.log(qualityValue);
  if (XPlayerRef.value) {
    selectedQuality.value = qualityValue;
    showQualityWrap.value = false;
  }
};

// 开启字母
const setSubtitle = () => {
  showSubtitle.value = !showSubtitle.value;
};

// 开启画中画功能
const onLoadedMetadata = () => {
  // 检查浏览器是否支持画中画
  isPipAvailable.value =
    document.pictureInPictureEnabled && !XPlayerRef.value.disablePictureInPicture;
};

// 切换画中画功能
const togglePip = async () => {
  if (!isPipAvailable.value) {
    console.error('当前浏览器不支持画中画功能.');
    return;
  }

  try {
    if (document.pictureInPictureElement) {
      // 如果当前已经在画中画模式，则退出
      await document.exitPictureInPicture();
    } else {
      // 如果当前不在画中画模式，则请求进入画中画模式
      await XPlayerRef.value.requestPictureInPicture();
    }
  } catch (error) {
    console.error('切换画中画失败:', error);
  }
};

// 全屏功能
const toggleFullScreen = () => {
  const videoElement = XPlayerRef.value;

  if (!document.fullscreenElement) {
    if (videoElement.requestFullscreen) {
      videoElement.requestFullscreen();
    } else if (videoElement.mozRequestFullScreen) { /* Firefox */
      videoElement.mozRequestFullScreen();
    } else if (videoElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      videoElement.webkitRequestFullscreen();
    } else if (videoElement.msRequestFullscreen) { /* IE/Edge */
      videoElement.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
  }
};

//加载完成后
onMounted(() => {
  const videoElement = XPlayerRef.value;
  if (videoElement) {
    videoElement.addEventListener("error", () => {
      videoLoadError.value = true;
    });
  }
});

//清理
onUnmounted(() => {
  if (timer) {
    clearInterval(timer); // 组件卸载前清除定时器
    timer = null;
  }
  // 清空弹幕map
  barrageMap = {};
});
</script>

<style lang="scss" scoped>
//初始化
* {
  margin: 0;
  padding: 0;
}

a,
ins {
  text-decoration: none;
  font-weight: 400;
  font-style: normal;
}

em,
i,
u {
  font-style: normal;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

input {
  outline: none;
}

//播放器样式
#xplayer {
  position: relative;
}

.player-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%; /* 视频容器宽度设置为100% */
  height: 100%; /* 视频容器高度设置为100% */
  min-width: 668px; /* 视频容器的最小宽度 */
  max-width: 1468px; /* 视频容器的最大宽度 */
  max-height: 879px; /* 视频容器的最大高度 */
  flex-wrap: nowrap;
  -webkit-box-shadow: 0 0 8px #e5e9ef;
  box-shadow: 0 0 8px #e5e9ef;
  -webkit-box-shadow: 0 0 8px #f1f2f3;
  box-shadow: 0 0 8px #f1f2f3;
}

.player-video-area {
  flex: 1;
  position: relative;
  background-color: #000;
  overflow: hidden;

  &:hover .player-control-wrap {
    z-index: 78;
    opacity: 1;
    user-select: none;
  }

  //播放按钮
  .player-state-wrap {
    position: absolute;
    cursor: pointer;
    pointer-events: none;
    right: 34px;
    bottom: 62px;
    z-index: 48;

    .player-state-play-icon {
      display: block;
      height: 64px;
      width: 64px;
    }

    .hidden {
      display: none;
    }
  }
}

.player-video-wrap {
  position: relative; /* 确保视频容器是相对定位，便于内部元素的定位 */
  overflow: hidden; /* 如果视频尺寸超出容器，将超出部分隐藏 */
}

.player-video-wrap video {
  content-visibility: visible;
  display: block;
  width: 100%; /* 视频宽度设置为100%，使其与容器宽度相同 */
  height: 100%; /* 视频高度设置为100%，使其与容器高度相同 */
  max-width: 100%; /* 确保视频的最大宽度不超过其容器 */
  max-height: 100%; /* 确保视频的最大高度不超过其容器 */
  max-height: 833px;
  object-fit: contain; /* 使用 contain 保持视频的宽高比 */
}

.player-video-perch {
  position: relative;
  //object-fit: contain; /* 使用 contain 保持视频的宽高比 */

  .videoLoadError {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
  }
}

/* 弹幕层样式 */
.player-adv-dm-wrap,
.player-bas-dm-wrap,
.player-row-dm-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.player-bas-dm-wrap {
  //基础弹幕
  .barrage {
    position: absolute;
    white-space: nowrap;
    left: 100%; /* 从右边开始 */
  }
}

/* 视频区域内工具栏 */
.player-control-wrap {
  z-index: 100;
  padding: 0 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0; //视频工具栏透明度
  transition: opacity 0.5s ease;
}

/* 视频区域工具栏样式 进度条 */
.player-control-top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

/* 进度条 */
.player-control-top {
  color: #fff;
}

.player-video-progress {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0 8px;
}

.player-video-progress-slider {
  height: 16px;
}

.bui-slider {
  height: 12px;
  cursor: pointer;
}

.bui {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  vertical-align: middle;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bui-slider .bui-track {
  position: relative;
  width: 100%;
  height: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.player-video-progress .bui-track-video-progress {
  height: 2px;
}

.player-video-progress .bui-slider .bui-track .bui-bar-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 1.5px;
  background: #e7e7e7;
}

.player-video-progress .bui-slider .bui-track .bui-bar-wrap .bui-bar {
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0px;
  /* 默认其实进度条宽度 */
  background: #00a1d6;
  will-change: transform;
}

/* 进度条上的小图标 */

.player-video-progress .bui-thumb {
  position: absolute;
  left: -10px;
  margin-top: -10px;
  pointer-events: none;
  cursor: pointer;
  z-index: 16;
}

.player-video-progress .bui-bar-normal .bui-thumb-dot-special {
  line-height: 12px;
}

/* 播放控制按钮 */
.player-video-control-bottom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 29px;
  line-height: 22px;
  margin: 20px 0 0;
  /* opacity: 0; */
  visibility: hidden;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/* 鼠标经过时显示 */
.player-control-bottom:hover {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}

/* 左侧开始按钮区域 */
.player-video-control-bottom-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  color: #fff;
  fill: #fff;
}

.player-video-btn-start {
  width: 22px;
  margin-left: -12px;
  padding-left: 12px;
}

.player-video-btn {
  cursor: pointer;
  text-align: center;
  color: #ffffff;
  color: hsla(0, 0%, 100%, 0.8);
  fill: hsla(0, 0%, 100%, 0.9);
  font-size: 0;
  z-index: 2;
  height: 22px;
  line-height: 22px;
}

.player-video-btn {
  height: 22px;
  line-height: 22px;
}

.player-video-btn .bp-svgicon {
  height: 22px;
  opacity: 0.9;
}

.player-video-btn .bp-svgicon svg {
  color: #ffffff;
  fill: #ffffff;
}

/* 视频时长显示*/
.player-video-time {
  line-height: 22px;
  height: 22px;
  font-size: 12px;
  position: relative;
  margin: 0 10px 0 0;
  cursor: pointer;
  min-width: 90px;
}

.player-video-time-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  color: hsla(0, 0%, 100%, 0.9);
}

/* 视频区域工具栏样式 工具条 */
.player-control-bottom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 45px;
  line-height: 22px;
  margin: 20px 0 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.player-video-control-bottom-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.player-video-btn-quality {
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  width: auto;
  position: relative;
  margin-right: 10px;
}

.player-video-quality-menu {
  display: flex;
  height: 22px;
}

.bui-select {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  cursor: pointer;
  line-height: normal;
}

.bui-select-wrap {
  position: relative;
  height: 100%;
}

.bui-select-quality-menu .bui-select-border {
  border: none;
  font-size: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 鼠标移动到清晰度切换 */
.bui-select-quality-menu:hover .bui-select-list {
  display: block;
}

.bui-select-list {
  position: absolute;
  bottom: 10px;
  left: -90px;
  height: auto !important;
  z-index: 70;
  webkit-transition: none;
  -o-transition: none;
  transition: none;
  font-size: 12px;
  width: auto;
  text-align: left;
  background: rgba(21, 21, 21, 0.9);
  border-radius: 2px;
  padding: 0;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  //display: none;
  /*隐藏清晰度选择列表*/
}

.bui-select-quality-menu .bui-select-item {
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  width: 145px;
  padding: 0 12px;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  &.active .player-video-quality-text {
    color: #00a1d6;
  }
}

.player-video-quality-text {
  margin-right: 4px;
}

/* 清晰度列表样式 */
.bui-select-list-wrap {
  position: relative;
}

.bui-select-quality-menu .bui-select-header {
  padding: 0;
  text-align: center;
  font-size: 14px;
  height: auto;
  width: 100%;
}

.player-video-btn-speed {
  position: relative;
  width: 50px;
  margin-right: 15px;
}

.player-control-bottom button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  color: inherit;
  text-align: inherit;
  font: inherit;
  line-height: inherit;
  width: 100%;
}

/* 倍速列表样式 */
.player-video-btn-speed .player-video-btn-speed-menu-wrap {
  position: absolute;
  bottom: 20px;
  left: -10px;
  width: 70px;
  font-size: 14px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  /* visibility: hidden; */
  //display: none;
  /* opacity: 0; */
  background: rgba(21, 21, 21, 0.9);
  border-radius: 2px;
  z-index: 70;
}

.player-video-btn-speed:hover .player-video-btn-speed-menu-wrap {
  display: block;
}

.player-video-btn-speed .player-video-btn-speed-name {
  color: hsla(0, 0%, 100%, 0.8);
  fill: hsla(0, 0%, 100%, 0.9);
  z-index: 70;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}

.player-video-btn-speed .player-video-btn-speed-name button {
  color: #fff;
}

.player-video-btn-speed-menu-list {
  position: relative;
  height: 36px;
  line-height: 36px;
  cursor: pointer;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  &.active {
    color: #00a1d6;
  }
}

/* 字幕 */
.player-control-bottom .player-video-btn-subtitle {
  width: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-right: 25px;
}

.player-video-btn-subtitle .player-iconfont-subtitle {
  width: 30px;
}

/* 音量按钮样式 */
.player-video-btn-volume {
  width: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-right: 15px;
}

.player-video-btn .bp-svgicon {
  height: 22px;
  opacity: 0.9;
}

/* 音量条 */
.player-video-volumebar-wrap {
  position: absolute;
  top: -100px;
  text-align: center;
  width: 32px;
  height: 100px;
  background: rgba(21, 21, 21, 0.9);
  border-radius: 2px;
  cursor: pointer;
  display: none; // 默认不显示
  opacity: 0;
  transition: opacity 0.3s ease; // 平滑过渡效果

  &.show {
    // 当.show类被添加时显示
    display: block;
    opacity: 1;
  }

  .player-video-volume-num {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #e7e7e7;
    user-select: none;
  }

  .player-video-volumebar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 60px;

    .bui-track {
      position: relative;
      width: 3px;
      height: 100%;

      //显示音量的外层容器
      .bui-bar-wrap {
        position: absolute;
        width: 2px;
        height: 100%;
        border-radius: 1.5px;
        background: #e7e7e7;
        bottom: 0;

        //显示当前音量条
        .bui-bar {
          position: absolute;
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
          top: 0;
          left: 0;
          right: 0;
          width: 2px;
          height: 100%; // 明确设置高度，使其可以被正确缩放
          background: #00a1d6;
        }
      }

      //音量球
      .bui-thumb {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #00a1d6;
        display: flex;
        align-items: center;
        justify-content: center;

        .bui-thumb-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #00a1d6;
        }
      }
    }
  }
}

/* 设置按钮 */
/* 开启画中画 */
/* 网页全屏 */
.player-video-btn-subtitle,
.player-video-btn-setting,
.player-video-btn-pip,
.player-video-web-fullscreen,
.player-video-btn-fullscreen {
  display: inline-block;
  width: 22px;
  height: 100%;
  position: relative;
  cursor: pointer;
  line-height: 16px;
  margin-right: 15px;
}

.player-video-control-bottom-right .player-video-btn:hover span {
  color: hsla(0, 0%, 100%, 1);
  fill: hsla(0, 0%, 100%, 1);
}

/* 发弹幕区域 */
.player-sending-area {
  box-sizing: border-box;
  border-left: 1.5px solid #f4f4f4;
  border-bottom: 1.5px solid #f4f4f4;
  border-right: 1.5px solid #f4f4f4;
  box-shadow: 0px 1.5px 1.5px 1.5px #f4f4f4;
}

.player-sending-area:before {
  content: "";
  display: block;
  margin-bottom: -1px;
  /* width: 100%; */
  height: 1px;
  background: #f4f4f4;
}

.player-sending-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: none;
  flex: none;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 46px;
  padding: 0 12px 0 20px;
  background: #fff;
  background: var(--bpx-dmsend-main-bg, #fff);
  font-size: 12px;
  -webkit-box-align: center;
}

/* 显示在线人数和弹幕数量 */
.player-video-info {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  height: 46px;
  line-height: 46px;
  color: #505050;
  color: var(--bpx-dmsend-info-font, #505050);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 12px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  margin-right: 20px;
}

.player-container[data-revision="1"] .player-sending-bar .player-video-info {
  line-height: 18px;
  margin-right: 24px;
  width: unset;
}

.player-video-info-online b {
  font-weight: 400;
  margin-right: 3px;
}

.player-video-info-dm {
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 弹幕发布区域root */
.player-dm-root {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 46px;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

// 弹幕开关切换
.player-dm-switch {
  .bui-danmaku-switch-label {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    width: 100%;

    svg {
      height: 100%;
      width: 100%;
      color: #00a1d6;
    }

    svg:hover {
      fill: #00a1d6;
    }

    .bui-danmaku-switch-on,
    .bui-danmaku-switch-off {
      width: 24px;
      height: 24px;
      display: block;
    }

    .hidden {
      display: none;
    }
  }

  &:hover {
    svg {
      fill: #00a1d6;
    }
  }
}

.player-dm-switch-input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.player-dm-switch-label {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  vertical-align: middle;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.player-dm-switch-input:checked
  + .player-dm-switch-label
  .player-dm-switch-body {
  background: #00a1d6;
}

/* 打开弹幕时按钮的样式 */
.player-dm-switch-input:checked
  + .player-dm-switch-label
  .player-dm-switch-body
  .player-dm-switch-dot {
  left: 100%;
  margin-left: -18px;
  color: #00a1d6;
  fill: #00a1d6;
}

.player-dm-switch-dot {
  top: 2px;
  left: 2px;
  border-radius: 100%;
  width: 16px;
  height: 16px;
  background-color: #fff;
  color: #757575;
  fill: #757575;
  line-height: 16px;
  text-align: center;
  -webkit-box-shadow: 0 3px 1px 0 rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 10%),
    0 3px 3px 0 rgb(0 0 0 / 5%);
  box-shadow: 0 3px 1px 0 rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 10%),
    0 3px 3px 0 rgb(0 0 0 / 5%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

span {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-style: normal;
}

.player-dm-switch-dot span {
  display: inline-block;
  width: 10px;
  height: 10px;
  font-size: 0;
}

.player-dm-switch-dot svg {
  width: 100%;
  height: 100%;
}

.choose_danmaku {
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -32px;
  bottom: 38px;
  width: 64px;
  height: 29px;
  text-align: center;
  line-height: 30px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  color: #fff;
  font-size: 12px;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  pointer-events: none;
  z-index: 99999;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.player-dm-root .player-dm-switch {
  position: relative;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-right: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.player-dm-switch-body {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 20px;
  outline: none;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #757575;
  vertical-align: middle;
}

.player-dm-root .player-dm-setting {
  width: 24px;
  height: 24px;
  margin-right: 12px;

  &.disabled {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
    pointer-events: none;
  }
}

.player-dm-root .player-dm-setting:hover .svg-dm-setting {
  color: #00a1d6;
  fill: #00a1d6;
  cursor: pointer;
}

/* 弹幕输入 */
/* .player-video-inputbar {
	width: calc(100% - 72px);
	min-width: 300px;
	height: 32px;
	border-radius: 8px;
}
 */
.player-video-inputbar {
  min-width: 280px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
  height: 34px;
  line-height: 34px;
  background: #f4f4f4;
  color: #999;
  border-radius: 5px;
}

.player-video-inputbar-wrap {
  width: 200px;
  height: 34px;
  border-radius: 2px 0 0 2px;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-align: center;
  border: 1px solid #e7e7e7;
  border: 1px solid var(#f1f2f3, #e7e7e7);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-flex: 1;

  .player-dm-wrap {
    flex: 1;
    box-sizing: border-box;
    text-align: left;
    line-height: 28px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 0 0 6px;
    cursor: not-allowed;
  }
}

.player-video-preview-emoji-wrap {
  position: absolute;
  top: -56px;
  left: 36px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
  z-index: 70;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: none;
}

/* 设置弹幕字体按钮 */
.player-video-btn-danmaku {
  position: relative;
  height: 34px;
  line-height: 34px;
  width: 30px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.player-iconfont-danmakutype {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.danmakutype-svgicon {
  display: block;
  width: 36px;
  height: 24px;
}

.danmakutype-svgicon svg {
  width: 100%;
  height: 100%;
}

.player-iconfont-danmakutype:hover {
  color: #00a1d6;
  fill: #00a1d6;
  cursor: pointer;
}

.player-video-danmaku-input {
  color: #212121;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  border: 0;
  height: 34px;
  line-height: 34px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 12;
  padding: 0 5px;
  background: none;
  font-size: 12px;
  min-width: 100px;
  width: 100%;
}

/* 弹幕礼仪 */
.player-video-hint {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  z-index: 13;
  width: 82px;
  opacity: 1;
  display: block;

  &.disabled {
    cursor: not-allowed;
  }

  a .bp-svgicon {
    width: 16px;
    height: 34px;
  }

  .bp-svgicon svg {
    width: 100%;
    height: 100%;
  }

  & a {
    font-size: 12px;
    color: #757575;
    fill: #757575;
    height: 100%;
    display: inline-block;

    &:hover {
      color: #00b5e5;
    }

    &.bp-svgicon {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: fill 0.3s;
      transition: fill 0.3s;
      vertical-align: middle;
      display: inline-block;
      font-size: 0;
    }
  }

  & a > span {
    vertical-align: top;
    height: 100%;
    line-height: 34px;
    display: inline-block;
  }
}

/* 发送按钮 */
.player-video-btn-send {
  z-index: 13;
  height: 34px;
  width: 60px;
  min-width: 60px;
  line-height: 34px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #00a1d6;
  border-radius: 0 2px 2px 0;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  border-radius: 0 8px 8px 0;

  &:hover {
    background-color: #00b5e5;
  }

  &.disabled {
    cursor: not-allowed;
    background-color: #e3e5e7;
  }
}

.hidden {
  display: none;
}
</style>
